<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>限时秒杀</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <style>
        .box{
        margin:0 auto;
        position:relative;
        background:url(images/flash_sale.png);
        width:702px;height:378px;
      }
      .box div{
        float:left;
        width:50px;
        height:50px;
        border:1px solid #ccc;
        margin-left:5px;
        line-height:50px;
        text-align: center;color:red;
        position:relative;
        top:260px;left:305px;
      }
    </style>
</head>
<body>
	<div class="box">
    	  <div  id="d"></div>		<!-- 剩余的天数 -->
    	  <div id="h"></div> 		<!-- 剩余的小时 -->
    	  <div id="m"></div> 		<!-- 剩余的分钟 -->
    	  <div id="s"></div>		<!-- 剩余的秒数 -->
    	</div>
       <script>
           $(function(){
               var endTime=new Date('2021-10-1 00:00:00');
               var endSeconds=endTime.getTime();
               var d=h=m=s=0;
               
               setInterval(function(){
                   var nowTime =new Date();//获取当前时间
                   //获取时间差，单位为秒
                   var remaining = parseInt((endSeconds-nowTime.getTime())/1000);
                   if(remaining>0){
                       var d=parseInt(remaining/86400);
                       var h=parseInt((remaining/3600)%24);
                       var m=parseInt((remaining/60)%60);
                       var s=parseInt(remaining%60);
                   }else{
                       clearInterval(this);
                       d=h=m=s='00';
                   }
                   $("#d").html(d+"天");
                   $("#h").html(h+"时");
                   $("#m").html(m+"分");
                   $("#s").html(s+"秒")
               })
           })
       </script>
</body>
</html>